<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>我是一个画布</h1>
    <canvas>
        <h1>你看不到我！</h1>
    </canvas>
    

    <style>
        canvas {
            border: 1px solid blue;
        }
    </style>

    <script>
        // 1 获取元素
        let el = document.querySelector("canvas");

        // 检查一下浏览器支不支持
        if( el.getContext){
            // 2 获取 设备上下文
            let ctx = el.getContext("2d");
            
            if( ctx ){
                // 3 写一些内容
                ctx.strokeStyle = "red";
                ctx.moveTo(0,0);
                ctx.lineTo(50,50);
                ctx.stroke();

                // 4 矩形 
                ctx.beginPath();    // 开始新的 事务 执行 stoke()的时候会有BUG
                // ctx.strokeRect(x1,y1,  x2,y2)
                ctx.strokeStyle = "blue";
                ctx.strokeRect(50,50,  100,100);
                
                // 4。2 填充颜色
                ctx.beginPath();    // 开始新的 事务
                ctx.fillStyle = "blue";
                ctx.fillRect(50,50,  100,100); // 执行填充

                ctx.beginPath(); // 开始新的 事务
                ctx.moveTo(150, 0);
                ctx.lineTo(150, 50);
                ctx.stroke(); // 马上执行

                

            }
   
        }

    </script>

</body>
</html>